<template>
  <!--  地图容器 -->
  <div id="map" style="height: 100vh; width: 100%">

  </div>
  <div class="calculation-box">
    <p>点击地图规选</p>
    <div id="calculate-area">
      {{state.drawArea}}平方公里
    </div>
  </div>


</template>
<script setup>
import mapboxgl  from "mapbox-gl";
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import {onMounted, reactive} from "vue";

//引入turf.js
import * as turf from '@turf/turf'
let map;
let draw;
/*
* 【使用GeoJSON source将多边形添加到地图】
* 地图通过addSource添加GeoJSON数据，之后通过addLayer创建新的填充图层并应用paint属性来设置多边形外观的样式
*
* */

const state = reactive({
  drawArea: 0
})
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id,
    style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
    center: [-68.137343, 45.137451], // 地图初始中心【经纬度】 starting position
    zoom: 5, // 地图初始缩放界别41 // starting zoom
    projection: 'globe', // 地图投影 为3D地球
    pitch: 62, // 相对于地面3D视角的角度 // starting pitch
    bearing: -20, // 东西南北 方向 正北方为0 // starting bearing
    antialias: false, // 抗锯齿，通过false关闭提升性能
    essential: true,
    renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
    skipOnboarding: true,//可选择不等待瓦片加载
  })

  // Mapbox GL JS中的图层是异步的，通过使用事件绑定在合适的时间更改地图
  // POI 信息点
  //
  map.on('style.load', () => {
    initControls();
    initSourceAndLayers();
  })

})

const initSourceAndLayers = () => {
  // Add a data source containing GeoJSON data.
  map.addSource('maine', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        // These coordinates outline Maine.
        'coordinates': [
          [
            [-67.13734, 45.13745],
            [-66.96466, 44.8097],
            [-68.03252, 44.3252],
            [-69.06, 43.98],
            [-70.11617, 43.68405],
            [-70.64573, 43.09008],
            [-70.75102, 43.08003],
            [-70.79761, 43.21973],
            [-70.98176, 43.36789],
            [-70.94416, 43.46633],
            [-71.08482, 45.30524],
            [-70.66002, 45.46022],
            [-70.30495, 45.91479],
            [-70.00014, 46.69317],
            [-69.23708, 47.44777],
            [-68.90478, 47.18479],
            [-68.2343, 47.35462],
            [-67.79035, 47.06624],
            [-67.79141, 45.70258],
            [-67.13734, 45.13745]
          ]
        ]
      }
    }
  });

  // Add a new layer to visulaize the polygon
  // 面
  map.addLayer({
    'id': 'maine',
    'type': 'fill',
    'source': 'maine', // reference the data source
    'paint': {
      'fill-color': '#0080ff', //blue color fill
      'fill-opacity': 0.5
    }
  });
  // 线
  // Add a black outline around the polygon
  map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'maine',
    'paint': {
      'line-color': '#000',
      'line-width': 3,
    }

  })
}
const initControls = () => {
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
  map.addControl(new mapboxgl.GeolocateControl())
  map.addControl(new mapboxgl.FullscreenControl())
  map.addControl(new mapboxgl.NavigationControl({visualizePitch: true}))
  map.addControl(new mapboxgl.ScaleControl())
}

</script>


<style scoped lang="scss">
.calculation-box {
  height: 75px;
  width: 150px;
  position: absolute;
  bottom: 40px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  text-align: center;
}

p {
  font-family: 'Open Sans';
  margin: 0;
  font-size: 13px;
}
</style>
